<template>
	<view class="checkPayPW">
		<!-- <view class="headerBag">
			<image src="/static/img/icon-Get-into@3.png" class="back" @click="goBack" mode="aspectFit"></image>
			<text class="font18 pagetitle">修改支付密码</text>
		</view> -->
		
		<view class="wrapper">
			<view class="font13 paypwhead">{{ stepText }}</view>
			<view class="inputdiv displayflex">
				<!-- <input 
					type="password" 
					auto-focus 
					id="changePwd" 
					maxlength="6"
					v-model="currentPassword"
					@input="onPasswordInput"
					class="password-input"
				> -->
				<u-code-input v-model="currentPassword" @finish="onPasswordInput"  maxlength="6" mode="box" dot></u-code-input>
			</view>
		</view>
	</view>
</template>

<script>
import { commonApi } from '@/api/index.js';
import md5 from '@/utils/md5.js';

export default {
	data() {
		return {
			currentPassword: '',
			changepwds: {
				checked: false,
				first: false,
				second: false
			},
			stepText: '请输入旧支付密码',
			loading: false
		};
	},
	
	onLoad() {
		uni.showToast({
			title: '请输入旧密码',
			icon: 'none'
		});
	},
	
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 密码输入处理
		async onPasswordInput(e) {
			const password = this.currentPassword;
			// const password = e;
			console.log('内容改变，当前值为：' + e);
			// 验证是否为数字
			const testNum = /^[0-9]*$/;
			console.log('=====pass======',password)
			if (!testNum.test(password)) {
				uni.showToast({
					title: '支付密码必须为数字',
					icon: 'none'
				});
				this.currentPassword = '';
				return;
			}
			console.log('=====password.length======',password.length !== 6)
			// 验证输入长度
			if (password.length !== 6) {
				return;
			}
			
			
			console.log('=====this.changepwds.checked======',this.changepwds.checked)
			if (!this.changepwds.checked) {
				// 第一步：验证旧密码
				await this.verifyOldPassword(password);
			} else if (!this.changepwds.first) {
				// 第二步：输入新密码
				this.changepwds.first = password;
				this.currentPassword = '';
				this.stepText = '请再次输入新支付密码';
			} else if (!this.changepwds.second) {
				// 第三步：确认新密码
				this.changepwds.second = password;
				if (this.changepwds.second === this.changepwds.first) {
					// 密码一致，提交修改
					await this.submitPasswordChange();
				} else {
					uni.showToast({
						title: '两次输入密码不一致',
						icon: 'none'
					});
					this.changepwds.second = false;
					this.currentPassword = '';
				}
			}
		},
		
		// 验证旧密码
		async verifyOldPassword(password) {
			try {
				const response = await commonApi.verifyPayPassword({
					pay_pwd: md5(password)
				});
				
				if (response.r !== 0) {
					uni.showToast({
						title: response.msg || '旧密码错误',
						icon: 'none'
					});
					this.currentPassword = '';
				} else {
					// 验证成功，进入下一步
					this.changepwds.checked = true;
					this.currentPassword = '';
					this.stepText = '请输入新支付密码';
				}
			} catch (error) {
				console.error('验证旧密码失败:', error);
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				});
				this.currentPassword = '';
			}
		},
		
		// 提交密码修改
		async submitPasswordChange() {
			this.loading = true;
			
			try {
				const response = await commonApi.changePayPassword({
					pay_pwd: md5(this.changepwds.first),
					pay_confirm_pwd: md5(this.changepwds.second)
				});
				
				uni.showToast({
					title: response.msg || '操作结果',
					icon: response.r === 0 ? 'success' : 'none'
				});
				
				if (response.r === 0) {
					// 修改成功，延迟返回
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				}
			} catch (error) {
				console.error('修改支付密码失败:', error);
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.checkPayPW {
	width: 100%;
	height: 100vh;
	position: fixed;
	background: white;
	top: 0;
	left: 0;
	z-index: 100;
}

.headerBag {
	background: #FF5033;
	height: 176rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back {
	width: 40rpx;
	height: 64rpx;
	position: absolute;
	left: 60rpx;
}

.pagetitle {
	color: white;
	text-align: center;
	font-size: 36rpx;
}

.font18 {
	font-size: 36rpx;
}

.font13 {
	font-size: 26rpx;
}

.wrapper {
	position: absolute;
	top: 0rpx;
	width: 100%;
	bottom: 0;
	overflow: auto;
	left: 0;
	background: #f7f7f7;
}

.paypwhead {
	height: 100rpx;
	line-height: 100rpx;
	width: 100%;
	border-bottom: 2rpx solid #e3e3e3;
	margin-top: 100rpx;
	text-align: center;
	
}

.inputdiv {
	// width: 1192rpx;
	height: 184rpx;
	position: relative;
	// border: 2rpx solid #d7d7d7;
	line-height: 180rpx;
	margin: 0 auto;
	margin-top: 68rpx;
	// background: #fff;
	// border-radius: 20rpx;
}

.displayflex {
	display: flex;
	justify-content: center;
	align-items: center;
}

.password-input {
	height: 100%;
	width: 100%;
	background: none;
	text-indent: 83rpx;
	letter-spacing: 166rpx;
	text-align: center;
	font-size: 32rpx;
}
</style>